<template >
  <li class="item">
    <div>
           <router-link :to="`/playlist/${item.id}`"><img :src="item.picUrl+'?imageView=1&type=webp&thumbnail=369x0'"/></router-link>
        <span>{{item.playCount|formatNum}}万</span>
    </div>
    <router-link :to="`/playlist/${item.id}`">{{item.name}}</router-link>
  </li>
</template>
<script>
export default {
  name: "ListItem",
  props: ["item"],
  created() {},
  filters: {
    formatNum(val) {
      return (val / 10000).toFixed(2);
    },
  },
};
</script>
<style lang="less" scoped>
li.item {
  display: flex;
  flex-direction: column;
  div {
    position: relative;
    span {
      position: absolute;
      right: 10px;
      top: 10px;
      background-image: url();
      background-repeat: no-repeat;
      background-size: 12px;
      font-size: 12px;
      color: white;
      text-shadow: 0px 0px 2px #000;
      padding-left: 12px;
    }
  }
  & > a {
    display: inline-block;
    width: 100%;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    padding-left: 10px 0px 10px 10px;
  }
}
</style>